import mapboxgl from 'mapbox-gl';
import store from '../../store/index.js';
import * as turf from '@turf/turf'
mapboxgl.accessToken = 'pk.eyJ1Ijoid3p5YW5ndXN0IiwiYSI6ImNsa2N0eHloMjB1NXYzZXFvZTZ1dDRpNTYifQ.mFXwExmzVLjDzckIBnXmJw';


let coor_old = [
  [74.91932166254529, 43.34799143293915],
  [78.82968043376917, 35.32100587068976],
  [82.20680846345789, 43.283329636323145],
  [84.60634680034286, 35.46590128939705],
  [88.60557736181482, 42.82877118912947],
  [92.07157718176103, 34.07894110138169],
  [100.86988441701243, 42.95898883351077],
  [109.31270449123406, 31.766651099437112],
  [127.53142149351078, 41.17789211364973],
  [135.8853697774751, 33.33965831774536],
  [142.3730104660895, 43.283329636323145],
  [148.94952294496136, 37.39631064993182],
  [152.94875350643326, 44.753129575870986],
];
let route = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "LineString",
        coordinates: coor_old,
      },
    },
  ],
};
let routeMove = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "LineString",
        coordinates: [],
      },
    },
  ],
};
let speed = 50; // 运行速度
let routelineChunk = turf.lineChunk(route.features[0], speed, {
  units: "miles",
});
// 将转好后的geometry拼接成正常的数据
let coor = [];
routelineChunk.features.forEach((el) => {
  el.geometry.coordinates.forEach((yo) => {
    coor.push(yo);
  });
});
route.features[0].geometry.coordinates = coor;
let origin = coor[0];
let point = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Point",
        coordinates: origin,
      },
    },
  ],
};

export const sb = ()=> {
  const map = new mapboxgl.Map({
    container: 'map', // container ID
    // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
    style: 'mapbox://styles/wzyangust/clg0pedu5000k01qoqmoovo90',
    center: [103.5,32.4], // starting position [lng, lat]
    zoom: 6 // starting zoom
  });
  map.on('load', async () => {
    map.addSource("route", {
      type: "geojson",
      data: route,
    });
    map.addSource("routeMove", {
      type: "geojson",
      data: routeMove,
    });
    map.addSource("point", {
      type: "geojson",
      data: point,
    });
    map.addLayer({
      id: "route",
      source: "route",
      type: "line",
      paint: {
        "line-width": 10,
        "line-color": "#F22C2C",
        "line-opacity": 0.3,
      },
      layout: {
        "line-cap": "round",
        "line-join": "round",
      },
    });
    map.addLayer({
      id: "routeMove",
      source: "routeMove",
      type: "line",
      paint: {
        "line-width": 2,
        "line-color": "#007cbf",
        "line-opacity": 1,
      },
      layout: {
        "line-cap": "round",
        "line-join": "round",
      },
    });
    map.addLayer({
      id: "point",
      source: "point",
      type: "symbol",
      layout: {
        "icon-image": "airport-15",
        "icon-rotate": ["get", "bearing"],
        "icon-rotation-alignment": "map",
        "icon-allow-overlap": true,
        "icon-ignore-placement": true,
      },
    });
    let that = this;
    let steps = 10000;
    let counter = 0;
    function animate() {
      if (counter == coor.length) {
        cancelAnimationFrame(requestAnimationFrame(animate));
        point.features[0].geometry.coordinates = [];
        point.features[0].geometry.coordinates = origin;
        map.getSource("point").setData(point);
        counter = -1;
        routeMove.features[0].geometry.coordinates = [];
      } else {
        // 移动添加点数据
        point.features[0].geometry.coordinates = coor[counter];
        if (counter < coor.length - 1) {
          point.features[0].properties.bearing = turf.bearing(
            turf.point(coor[counter >= steps ? counter - 1 : counter]),
            turf.point(coor[counter >= steps ? counter : counter + 1])
          );
        } else {
          point.features[0].properties.bearing = turf.bearing(
            turf.point(coor[counter >= steps ? counter - 3 : counter - 2]),
            turf.point(coor[counter >= steps ? counter - 2 : counter - 1])
          );
        }
        if (point.features[0].properties.bearing != 0) {
          map.getSource("point").setData(point);
        }
        // 添加线数据
        routeMove.features[0].geometry.coordinates.push(coor[counter]);
        map.getSource("routeMove").setData(routeMove);
      }
      counter++;
      requestAnimationFrame(animate);
    }
    animate(counter);
  })
}